<template>
  <div class="welcome-container">
    <img src="../assets/image/bgc.jpeg" alt="" />
    <div id="container"></div>
    <div id="main"></div>
    <div id="mychart"></div>
  </div>
</template>

<script>
import axios from 'axios'
import { WastePrice } from '../api/waste.js'
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          name: '南雄回收分部',
          longitude: '114.46789238030753',
          latitude: '25.087620068866597'
        },
        {
          id: 2,
          name: '始兴回收分部',
          longitude: '114.14974559142569',
          latitude: '24.835280721290673'
        },
        {
          id: 3,
          name: '浈江回收总部',
          longitude: '113.62047814427301',
          latitude: '24.816313451903572'
        },
        {
          id: 4,
          name: '曲江回收分部',
          longitude: '113.57087398561392',
          latitude: '24.61370713206045'
        },
        {
          id: 5,
          name: '武江回收分部',
          longitude: '113.34058992090954',
          latitude: '24.61370713206045'
        },
        {
          id: 6,
          name: '仁化回收分部',
          longitude: '113.77087398561392',
          latitude: '25.087620068866597'
        },
        {
          id: 7,
          name: '翁源回收分部',
          longitude: '114.12974559142569',
          latitude: '24.367726561466025'
        },
        {
          id: 8,
          name: '乳源回收分部',
          longitude: '113.34058992090954',
          latitude: ' 24.79278314753819'
        },
        {
          id: 9,
          name: '乐昌回收分部',
          longitude: '113.34058992090954',
          latitude: '25.24572302352451'
        },
        {
          id: 10,
          name: '新丰回收分部',
          longitude: '114.12974559142569',
          latitude: '24.0686897852886'
        }
      ],
      fzlist: [],
      sllist: [],
      jslist: [],
      jdlist: [],
      yihuishou: [],
      daihuishou: []
    }
  },
  mounted() {
    this.init()
    this.getCharts()
    this.getCharts1()
  },
  methods: {
    init() {
      const map = new window.BMapGL.Map('container')
      map.centerAndZoom(new window.BMapGL.Point(116.404, 39.915), 7)
      map.enableScrollWheelZoom()
      const zoomCtrl = new window.BMapGL.ZoomControl()
      map.addControl(zoomCtrl)

      // --- 添加行政区划 ---
      const dist = new window.BMapGL.DistrictLayer({
        name: '(韶关市)',
        kind: 1,
        fillColor: '#618bf8',
        fillOpacity: 1,
        strokeColor: '#daeafa',
        viewport: true
      })
      map.addDistrictLayer(dist)

      const marker = new window.BMapGL.Marker(new window.BMapGL.Point(116.404, 39.915))
      map.addOverlay(marker)

      const point = []
      for (let i = 0; i < this.list.length; i++) {
        point.push(new window.BMapGL.Point(this.list[i].longitude, this.list[i].latitude))
      }
      this.list.forEach((item, index) => {
        console.log(index)
        const point = new window.BMapGL.Point(item.longitude, item.latitude) // 创建点坐标
        const marker = new window.BMapGL.Marker(point) // 创建标注
        map.addOverlay(marker) // 添加标注到地图
        const opts = {
          width: 200,
          height: 100,
          title: item.name
        }
        setTimeout(() => {
          const infoWindow = new window.BMapGL.InfoWindow(
            `待回收： ${this.daihuishou[index]}  \n <br> 已回收： ${this.yihuishou[index]}`,
            opts
          )
          marker.addEventListener('click', function () {
            this.openInfoWindow(infoWindow, point)
          })
        }, 2000)
      })

      // --- 行政区划添加鼠标事件 ---
      dist.addEventListener('mouseover', function (e) {
        console.log(e)
        e.currentTarget.setFillColor('#9169db')
      })
      dist.addEventListener('mouseout', function (e) {
        e.currentTarget.setFillColor(e.currentTarget.style.fillColor)
      })
    },
    async getCharts() {
      const { data: res } = await axios.get('/content/waste/addressCount')
      const l = res.data
      console.log(l)
      this.yihuishou = new Array(10).fill(0)
      this.daihuishou = new Array(10).fill(0)
      for (let i = 0; i < l.length; i++) {
        if (l[i].address === '南雄') {
          if (l[i].status === 1) {
            this.yihuishou[0] = l[i].count
          } else {
            this.daihuishou[0] = l[i].count
          }
        }

        if (l[i].address === '始兴') {
          if (l[i].status === 1) {
            this.yihuishou[1] = l[i].count
          } else {
            this.daihuishou[1] = l[i].count
          }
        }

        if (l[i].address === '浈江') {
          if (l[i].status === 1) {
            this.yihuishou[2] = l[i].count
          } else {
            this.daihuishou[2] = l[i].count
          }
        }

        if (l[i].address === '曲江') {
          if (l[i].status === 1) {
            this.yihuishou[3] = l[i].count
          } else {
            this.daihuishou[3] = l[i].count
          }
        }

        if (l[i].address === '武江') {
          if (l[i].status === 1) {
            this.yihuishou[4] = l[i].count
          } else {
            this.daihuishou[4] = l[i].count
          }
        }

        if (l[i].address === '仁化') {
          if (l[i].status === 1) {
            this.yihuishou[5] = l[i].count
          } else {
            this.daihuishou[5] = l[i].count
          }
        }

        if (l[i].address === '翁源') {
          if (l[i].status === 1) {
            this.yihuishou[6] = l[i].count
          } else {
            this.daihuishou[6] = l[i].count
          }
        }

        if (l[i].address === '乳源') {
          if (l[i].status === 1) {
            this.yihuishou[7] = l[i].count
          } else {
            this.daihuishou[7] = l[i].count
          }
        }

        if (l[i].address === '乐昌') {
          if (l[i].status === 1) {
            this.yihuishou[8] = l[i].count
          } else {
            this.daihuishou[8] = l[i].count
          }
        }

        if (l[i].address === '新丰') {
          if (l[i].status === 1) {
            this.yihuishou[9] = l[i].count
          } else {
            this.daihuishou[9] = l[i].count
          }
        }
      }

      const chartDom = document.getElementById('main')
      const myChart = this.$echarts.init(chartDom)
      let option = {}

      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: ['南雄', '始兴', '浈江', '曲江', '武江', '仁化', '翁源', '乳源', '乐昌', '新丰']
        },
        series: [
          {
            name: '已回收',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: this.yihuishou
          },
          {
            name: '待回收',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: this.daihuishou
          }
        ]
      }

      option && myChart.setOption(option)
    },
    async getCharts1() {
      // 废纸历史价格
      const { data: resFz } = await WastePrice(3)
      console.log(resFz)
      this.fzlist = resFz.data
      this.fzlist = this.formatData(this.fzlist)

      // 塑料历史价格
      const { data: resSl } = await WastePrice(2)
      this.sllist = resSl.data
      this.sllist = this.formatData(this.sllist)

      // 金属历史价格
      const { data: resJs } = await WastePrice(1)
      this.jslist = resJs.data
      this.jslist = this.formatData(this.jslist)

      // 家电历史价格
      const { data: resJd } = await WastePrice(4)
      this.jdlist = resJd.data
      this.jdlist = this.formatData(this.jdlist)

      const chartDom = document.getElementById('mychart')
      const myChart = this.$echarts.init(chartDom)
      let option = {}

      option = {
        title: {
          text: 'Stacked Line'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.fzlist[0]
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '纸皮',
            type: 'line',
            data: this.fzlist[1]
          },
          {
            name: '塑料',
            type: 'line',
            data: this.sllist[1]
          },
          {
            name: '金属',
            type: 'line',
            data: this.jslist[1]
          },
          {
            name: '家电',
            type: 'line',
            data: this.jdlist[1]
          }
        ]
      }
      option && myChart.setOption(option)
    },
    // 规范历史数据
    formatData(arr) {
      this.x = []
      this.y = []
      for (let i = 0; i < 7; i++) {
        this.x.unshift(arr.time[i].substr(5, 5))
      }
      this.y = arr.price.slice(0, 7).reverse()
      return [this.x, this.y]
    }
  }
}
</script>

<style lang="less" scoped>
.welcome-container {
  position: relative;
  width: 100%;
  height: 100vh;

  img {
    width: 100%;
    height: 100%;
    opacity: 0.4;
  }
}

#container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 550px;
  height: 500px;
  z-index: 999;
  opacity: 1 !important;
}

div[id^='main'] {
  position: absolute;
  top: 0;
  left: 0;
  width: 700px;
  height: 500px;
  z-index: 9999;
}

div[id^='mychart'] {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 700px;
  height: 500px;
  z-index: 9999;
}
</style>
